<template>
  <div>
    <div class="pricing-page">
      <div
        v-for="item in comboList"
        :key="item.id"
        class="combo-item"
        :class="item.type === 2 ? 'basic' : 'pro'"
      >
        <div class="header">
          <p class="title">{{ item.thaliName }}</p>
          <p class="desc">{{ item.thaliDesc }}</p>
        </div>

        <div class="center">
          <div class="original">
            <span class="original-price">原价{{ item.originalPrice }}</span>
            <span class="discount">{{ item.discountContent }}</span>
          </div>
          <div>
            <span class="unit">￥</span>
            <span class="price">{{ item.price }}</span
            ><span class="unit">/ {{ item.effectiveDay }}天</span>
          </div>
          <div class="content">含存储{{ item.storageSize }}GB，短信{{ item.messageCount }}条</div>
        </div>

        <div class="footer">
          <button @click="payConfirm(item)">{{ item.type === 2 ? '免费试用' : '立即购买' }}</button>
        </div>

        <div class="detail">
          <ul class="card-features" v-if="item.thaliName.includes('试用')">
            <li v-for="(feature, i) in useCombo" :key="i">
              <span class="checkmark"
                ><el-icon>
                  <Check />
                </el-icon>
              </span>
              <span class="card-feature">{{ feature }}</span>
            </li>
          </ul>

          <ul class="card-features" v-if="item.thaliName.includes('基础')">
            <li v-for="(feature, i) in basicCombo" :key="i">
              <span class="checkmark"
                ><el-icon>
                  <Check />
                </el-icon>
              </span>
              <span class="card-feature">{{ feature }}</span>
            </li>
          </ul>

          <ul class="card-features" v-if="item.thaliName.includes('专业')">
            <li v-for="(feature, i) in professionalCombo" :key="i">
              <span class="checkmark"
                ><el-icon>
                  <Check />
                </el-icon>
              </span>
              <span class="card-feature">{{ feature }}</span>
            </li>
          </ul>

          <ul class="card-features" v-if="item.thaliName.includes('旗舰')">
            <li v-for="(feature, i) in FlagshipCombo" :key="i">
              <span class="checkmark"
                ><el-icon>
                  <Check />
                </el-icon>
              </span>
              <span class="card-feature">{{ feature }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="step-btn" v-if="!isRenewal">
      <el-button type="default" @click="prevStep">上一步</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import { useTemporaryStore } from '@/store/modules/temporary'
  import {
    addDrivingSchool,
    getThaliList,
    editDrivingSchoolInfo,
    thaliRenewal
  } from '@/api/ApiList'
  import { ElMessageBox } from 'element-plus'
  import { useUserStore } from '@/store/modules/user'
  import { Check } from '@element-plus/icons-vue'

  const userStore = useUserStore()
  const useTemporaryData = useTemporaryStore()
  const userInfo = computed(() => userStore.getUserInfo)
  const isRenewal = ref(false)

  const route = useRoute()

  const useCombo = ['驾校基础功能', '微信小程序', '学员管理', '运营分析', '专享售前咨询服务']
  const basicCombo = [
    '驾校基础功能',
    '微信小程序',
    '微信公众号',
    'Windows学员端',
    '自定义题库',
    '基础营销功能',
    '专享售后群服务',
    '线上1v1培训指导讲解'
  ]
  const professionalCombo = [
    '驾校基础功能',
    '微信小程序',
    '微信公众号',
    'Windows学员端',
    '自定义题库',
    '高级营销功能(包含十余种插件)',
    '自定义版权为您打造独家品牌',
    '专享售后群服务',
    '线上1v1培训指导讲解'
  ]
  const FlagshipCombo = [
    '驾校基础功能',
    '微信小程序',
    '微信公众号',
    'IOS苹果端 / 安卓端',
    'Windows学员端',
    '自定义题库',
    '高级营销功能(包含十余种插件)',
    '自定义版权为您打造独家品牌',
    '专享SVIP售后群服务',
    '专家1v1培训指导讲解'
  ]

  const comboList = ref<Record<string, any>[]>([])

  const emit = defineEmits(['back', 'success', 'end'])

  async function getData() {
    try {
      const res = await getThaliList({
        pageNum: 1,
        pageSize: 10
      })
      if (res.code === '00000' && res.data) {
        comboList.value = !isRenewal.value
          ? res.data.list
          : res.data.list.filter((item: any) => item.type === 1)
      }
    } catch (e) {
      console.error(e)
    }
  }

  function prevStep() {
    emit('back')
  }

  function payConfirm(item: any) {
    ElMessageBox.confirm('确定购买此套餐吗？', '套餐选择', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      if (isRenewal.value) {
        handleThaliRenewal(item)
        return
      }

      let obj: Record<string, any> = useTemporaryData.getAddDrivingSchoolInfo()
      if (obj.id) {
        editDrivingSchoolData(item)
      } else {
        addDrivingSchoolData(item)
      }
    })
  }

  async function addDrivingSchoolData(item: any) {
    try {
      let obj: Record<string, any> = useTemporaryData.getAddDrivingSchoolInfo()
      obj.userId = userInfo.value.id
      obj.thaliId = item.id
      useTemporaryData.setChooseDrivingSchoolCombo(item)
      delete obj.area
      const res = await addDrivingSchool(obj)
      if (res.code === '00000') {
        useTemporaryData.setPayOrder(res.data.ordersNo)
        useTemporaryData.setDrivingSchoolInfo(res.data)
        if (item.type === 2) {
          emit('end')
        } else if (item.type === 1) {
          addSuccess()
        }
      }
    } catch (e) {
    } finally {
    }
  }

  async function editDrivingSchoolData(item: any) {
    let obj: Record<string, any> = useTemporaryData.getAddDrivingSchoolInfo()
    obj.userId = userInfo.value.id
    obj.thaliId = item.id
    obj.ordersNo = useTemporaryData.getPayOrdersNo()
    useTemporaryData.setChooseDrivingSchoolCombo(item)
    delete obj.area
    const res = await editDrivingSchoolInfo(obj, obj.id)
    if (res.code === '00000') {
      useTemporaryData.setPayOrder(res.data.ordersNo)
      useTemporaryData.setDrivingSchoolInfo(res.data)
      if (item.type === 2) {
        emit('end')
      } else if (item.type === 1) {
        addSuccess()
      }
    }
  }

  async function handleThaliRenewal(item: any) {
    try {
      let obj: Record<string, any> = useTemporaryData.getAddDrivingSchoolInfo()
      useTemporaryData.setChooseDrivingSchoolCombo(item)
      const res = await thaliRenewal({
        storeId: obj.id,
        thaliId: item.id
      })
      if (res.code === '00000') {
        useTemporaryData.setPayOrder(res.data.ordersNo)
        addSuccess()
      }
    } catch {
    } finally {
    }
  }

  function addSuccess() {
    emit('success')
  }

  onMounted(() => {
    if (route.query.isRenewal) {
      isRenewal.value = true
    }

    getData()
  })
</script>

<style scoped lang="scss">
  .pricing-page {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 20px;
    padding: 40px;

    .combo-item {
      flex: 1;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 600px;
      max-width: 400px;

      .header {
        padding: 20px;
        background: linear-gradient(135deg, #4b9cff, #3586ff);
        color: #fff;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        min-height: 80px;

        .title {
          font-size: 20px;
          font-weight: 600;
          margin-bottom: 16px;
        }

        .desc {
          font-size: 12px;
          opacity: 0.9;
        }
      }

      .center {
        padding: 30px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .original {
          margin-bottom: 10px;

          .original-price {
            color: #b4b4b4;
            text-decoration: line-through;
          }

          .discount {
            height: 18px;
            padding: 0 4px;
            line-height: 18px;
            font-size: 14px;
            text-align: center;
            border-radius: 3px;
            color: #fff;
            background: linear-gradient(102.89deg, #fa9054 0.25%, #ff4921 99.75%);
            margin-left: 5px;
          }
        }

        .unit {
          color: #000;
          font-size: 18px;
          font-weight: bold;
        }

        .price {
          font-size: 40px;
          font-weight: bold;
          color: #000;
        }

        .content {
          margin-top: 10px;
          background: #eceff5;
          color: #7989ae;

          padding: 10px 30px;
          border-radius: 6px;
        }
      }

      .detail {
        flex: 1;
        padding: 30px 20px;

        .card-features {
          list-style: none;
          padding-left: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 12px;

          .checkmark {
            font-size: 14px;
            color: rgb(37, 207, 107);
            font-weight: 500;
          }

          .card-feature {
            font-size: 14px;
            color: #222;
            margin-left: 5px;
          }
        }
      }

      .footer {
        padding: 16px 20px;
        text-align: center;

        button {
          width: 100%;
          padding: 10px 0;
          border: none;
          border-radius: 8px;
          font-size: 16px;
          font-weight: 600;
          cursor: pointer;
          background: #25cf6b;
          color: #fff;
        }
      }

      &.basic {
        .header {
          background: linear-gradient(90deg, #0fd2b7, #25cf6b);
          color: #fff;
        }
      }

      &.pro {
        .header {
          background: linear-gradient(90deg, #0fd2b7, #25cf6b);
          color: #fff;
        }
      }
    }
  }

  .step-btn {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 20px;
  }
</style>
